<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程成绩分析 - 教师端</title>
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/css/all.min.css">
    <script src="/js/echarts.min.js"></script>
    <style>
        :root {
            --primary: #4361ee;
            --secondary: #3f37c9;
            --success: #4caf50;
            --warning: #ff9800;
            --danger: #f44336;
            --info: #2196f3;
            --light: #f8f9fa;
            --dark: #343a40;
            --card-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            --transition: all 0.3s ease;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f5f7fb;
            color: #333;
            min-height: 100vh;
        }

        /* 导航栏样式 */
        .navbar {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 0.8rem 1rem;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.5rem;
            display: flex;
            align-items: center;
        }

        .navbar-brand i {
            margin-right: 10px;
            font-size: 1.8rem;
        }

        .nav-link {
            color: rgba(255, 255, 255, 0.85) !important;
            font-weight: 500;
            padding: 0.5rem 1rem !important;
            border-radius: 4px;
            margin: 0 3px;
            transition: var(--transition);
        }

        .nav-link:hover, .nav-link.active {
            background-color: rgba(255, 255, 255, 0.15);
            color: white !important;
        }

        /* 主内容区域 */
        .main-content {
            padding: 2rem 0;
        }

        .page-header {
            background: white;
            border-radius: 15px;
            padding: 1.5rem;
            box-shadow: var(--card-shadow);
            margin-bottom: 2rem;
            position: relative;
            overflow: hidden;
        }

        .page-header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 5px;
            height: 100%;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
        }

        .page-title {
            font-weight: 700;
            margin-bottom: 0.5rem;
            color: var(--dark);
        }

        .page-subtitle {
            color: #6c757d;
            margin-bottom: 0;
        }

        /* 课程卡片 */
        .course-card {
            background: white;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
            margin-bottom: 2rem;
            overflow: hidden;
            transition: var(--transition);
        }

        .course-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
        }

        .course-header {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: white;
            padding: 1.5rem;
            position: relative;
        }

        .course-header h5 {
            margin-bottom: 0.5rem;
            font-weight: 700;
        }

        .course-stats {
            display: flex;
            gap: 2rem;
            margin-top: 1rem;
        }

        .course-stat {
            text-align: center;
        }

        .course-stat .number {
            font-size: 1.5rem;
            font-weight: 700;
            display: block;
        }

        .course-stat .label {
            font-size: 0.875rem;
            opacity: 0.9;
        }

        .course-body {
            padding: 1.5rem;
        }

        .course-chart {
            height: 300px;
            width: 100%;
        }

        /* 课程列表 */
        .course-list {
            background: white;
            border-radius: 12px;
            box-shadow: var(--card-shadow);
            margin-bottom: 2rem;
        }

        .course-item {
            padding: 1.5rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            transition: var(--transition);
            cursor: pointer;
        }

        .course-item:hover {
            background-color: rgba(67, 97, 238, 0.05);
        }

        .course-item:last-child {
            border-bottom: none;
        }

        .course-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1rem;
        }

        .course-name {
            font-weight: 600;
            font-size: 1.1rem;
            color: var(--dark);
        }

        .course-score {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary);
        }

        .course-details {
            display: flex;
            gap: 2rem;
            color: #6c757d;
            font-size: 0.875rem;
        }

        .course-detail {
            display: flex;
            align-items: center;
        }

        .course-detail i {
            margin-right: 0.5rem;
            color: var(--primary);
        }

        /* 加载动画 */
        .loading {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 200px;
        }

        .spinner-border {
            color: var(--primary);
        }

        /* 错误提示 */
        .error-message {
            background: #f8d7da;
            color: #721c24;
            padding: 1rem;
            border-radius: 8px;
            margin-bottom: 1rem;
            border: 1px solid #f5c6cb;
        }
    </style>
</head>
<body>
    <!-- 导航栏 -->
    <nav class="navbar navbar-expand-lg navbar-dark">
        <div class="container">
            <a class="navbar-brand" href="/teacher/home">
                <i class="fas fa-chalkboard-teacher"></i>
                在线考试系统 - 教师端
            </a>
            <div class="navbar-nav ms-auto">
                <a class="nav-link" href="/home/manage">
                    <i class="fas fa-home"></i> 首页
                </a>
                <a class="nav-link active" href="/teacher/score/analysis">
                    <i class="fas fa-chart-line"></i> 成绩分析
                </a>
                <a class="nav-link" href="/exam/manage">
                    <i class="fas fa-file-alt"></i> 考试管理
                </a>
                <a class="nav-link" href="/teacher/question/manage">
                    <i class="fas fa-question-circle"></i> 题库管理
                </a>
                <a class="nav-link" href="/logout">
                    <i class="fas fa-sign-out-alt"></i> 退出
                </a>
            </div>
        </div>
    </nav>

    <!-- 主内容 -->
    <div class="container main-content">
        <!-- 页面标题 -->
        <div class="page-header">
            <h1 class="page-title">
                <i class="fas fa-book"></i> 课程成绩分析
            </h1>
            <p class="page-subtitle">查看各门课程的成绩统计和趋势分析</p>
        </div>

        <!-- 错误提示 -->
        <div id="errorMessage" class="error-message" style="display: none;"></div>

        <!-- 课程列表 -->
        <div class="course-list">
            <div class="course-header">
                <h5><i class="fas fa-list"></i> 课程列表</h5>
                <p class="mb-0">点击课程查看详细分析</p>
            </div>
            <div id="courseList">
                <div class="loading">
                    <div class="spinner-border" role="status">
                        <span class="visually-hidden">加载中...</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 课程详情 -->
        <div id="courseDetail" style="display: none;">
            <div class="course-card">
                <div class="course-header">
                    <h5 id="selectedCourseName">课程名称</h5>
                    <div class="course-stats">
                        <div class="course-stat">
                            <span class="number" id="courseAverageScore">0</span>
                            <span class="label">平均分</span>
                        </div>
                        <div class="course-stat">
                            <span class="number" id="courseExamCount">0</span>
                            <span class="label">考试次数</span>
                        </div>
                        <div class="course-stat">
                            <span class="number" id="courseStudentCount">0</span>
                            <span class="label">学生人数</span>
                        </div>
                    </div>
                </div>
                <div class="course-body">
                    <div id="courseChart" class="course-chart"></div>
                </div>
            </div>
        </div>
    </div>

    <script src="/js/bootstrap.bundle.min.js"></script>
    <script>
        // 全局变量
        let courseChart;
        let courseData = [];

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            initializeChart();
            loadCourseData();
        });

        // 初始化图表
        function initializeChart() {
            courseChart = echarts.init(document.getElementById('courseChart'));
            
            // 响应式处理
            window.addEventListener('resize', function() {
                courseChart.resize();
            });
        }

        // 加载课程数据
        function loadCourseData() {
            fetch('/teacher/score/api/course-analysis')
                .then(response => response.json())
                .then(data => {
                    if (data.success) {
                        courseData = data.data;
                        updateCourseList(data.data);
                    } else {
                        showError('获取课程数据失败：' + data.message);
                    }
                })
                .catch(error => {
                    console.error('获取课程数据失败:', error);
                    showError('获取课程数据失败');
                });
        }

        // 更新课程列表
        function updateCourseList(courses) {
            const container = document.getElementById('courseList');
            
            if (!courses || courses.length === 0) {
                container.innerHTML = '<div class="p-3 text-center text-muted">暂无课程数据</div>';
                return;
            }

            const html = courses.map(course => `
                <div class="course-item" onclick="showCourseDetail('${course.courseName}')">
                    <div class="course-item-header">
                        <div class="course-name">${course.courseName}</div>
                        <div class="course-score">${course.averageScore.toFixed(1)}</div>
                    </div>
                    <div class="course-details">
                        <div class="course-detail">
                            <i class="fas fa-file-alt"></i>
                            <span>${course.examCount} 次考试</span>
                        </div>
                        <div class="course-detail">
                            <i class="fas fa-users"></i>
                            <span>${course.studentCount} 名学生</span>
                        </div>
                    </div>
                </div>
            `).join('');

            container.innerHTML = html;
        }

        // 显示课程详情
        function showCourseDetail(courseName) {
            const course = courseData.find(c => c.courseName === courseName);
            if (!course) return;

            // 更新页面显示
            document.getElementById('selectedCourseName').textContent = course.courseName;
            document.getElementById('courseAverageScore').textContent = course.averageScore.toFixed(1);
            document.getElementById('courseExamCount').textContent = course.examCount;
            document.getElementById('courseStudentCount').textContent = course.studentCount;

            // 显示详情区域
            document.getElementById('courseDetail').style.display = 'block';

            // 滚动到详情区域
            document.getElementById('courseDetail').scrollIntoView({ 
                behavior: 'smooth',
                block: 'start'
            });

            // 更新图表
            updateCourseChart(course);
        }

        // 更新课程图表
        function updateCourseChart(course) {
            // 这里可以根据需要显示课程的具体图表
            // 例如：各次考试的平均分趋势、成绩分布等
            const option = {
                title: {
                    text: `${course.courseName} - 成绩分析`,
                    left: 'center',
                    textStyle: {
                        fontSize: 16,
                        fontWeight: 'bold'
                    }
                },
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['平均分'],
                    top: 30
                },
                xAxis: {
                    type: 'category',
                    data: course.examNames || ['考试1', '考试2', '考试3'],
                    axisLabel: {
                        rotate: 45
                    }
                },
                yAxis: {
                    type: 'value',
                    name: '分数',
                    min: 0,
                    max: 100
                },
                series: [{
                    name: '平均分',
                    type: 'line',
                    data: course.scores || [course.averageScore],
                    smooth: true,
                    lineStyle: {
                        color: '#4361ee',
                        width: 3
                    },
                    itemStyle: {
                        color: '#4361ee'
                    },
                    areaStyle: {
                        color: {
                            type: 'linear',
                            x: 0,
                            y: 0,
                            x2: 0,
                            y2: 1,
                            colorStops: [{
                                offset: 0, color: 'rgba(67, 97, 238, 0.3)'
                            }, {
                                offset: 1, color: 'rgba(67, 97, 238, 0.1)'
                            }]
                        }
                    }
                }]
            };
            
            courseChart.setOption(option);
        }

        // 显示错误信息
        function showError(message) {
            const errorDiv = document.getElementById('errorMessage');
            errorDiv.textContent = message;
            errorDiv.style.display = 'block';
            
            setTimeout(() => {
                errorDiv.style.display = 'none';
            }, 5000);
        }
    </script>
</body>
</html> 